<script lang="ts">
import { defineComponent } from "vue";
import BlameView from "./BlameView.vue";
import BlameCollectView from "./BlameCollectView.vue";
import { ElMessageBox } from "element-plus";
import { ElMessage } from "element-plus";
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
import { htmlToPDF } from "@/utils/html2pdf";
import { TableInstance } from "element-plus";

export default defineComponent({
  components: {
    // BlameView,
  },
});
</script>
<script lang="ts" setup>
import { useRouter } from "vue-router";
import {
  reactive,
  ref,
  onMounted,
  getCurrentInstance,
  toRefs,
  nextTick,
  watch,
} from "vue";

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

const _ = window.ResizeObserver;

window.ResizeObserver = class ResizeObserver extends _ {
  constructor(callback: any) {
    callback = debounce(callback, 20);
    super(callback);
  }
};
const debounce = (
  callback: { apply: (arg0: any, arg1: any[]) => void },
  delay: number | undefined
) => {
  let tid: number | undefined;
  return function (...args: any) {
    tid && clearTimeout(tid);
    tid = setTimeout(() => {
      callback.apply(getCurrentInstance(), args);
    }, delay);
  };
};

const instance = getCurrentInstance();
const { $http } = instance?.appContext.config.globalProperties as any;
const form_uid = ref();
const form: { [key: string]: any } = reactive({
  item_id: "",
  object_name: "",
  released_status: "",
  owning_user_id: "",
  owning_user_name: "",
  project_name: "",
  project_id: "",
  model_code: "",
  factory: "",
  send_dest: "",
  product_level: "",
  dr_type: "",
  dr_type_other: "",
  impl_date: "",
  attendance: "",
  is_meeting_valid: true,
  blame_addable: true,
  blameCounts: {
    "△": 0,
    "×": 0,
    "□": 0,
    确认: 0,
  },
});

// const blameForms: { [key: string]: any } = reactive({});
const blameFormDatas: { [key: string]: any } = ref([]);
const displayBlameFormData: { [key: string]: any } = ref({});
const blameViewRef = ref<any>(null);
const blameCollectViewRef = ref<any>(null);
//const uid = ref("");
const userId = ref("");
const userName = ref("");
const hasSaveButton = ref(false);
const isOwner = ref(false);
const formReadOnly = ref(false);
// /**
//  * 前端传递参数，
//  * 0表示可以编辑主表单，可以增加和删除指摘
//  * 1表示可以增加和删除指摘，但是不能编辑主表单
//  * 2表示只能编辑指摘的指定内容，不能增加和删除，也不能编辑主表单
//  */
// const editModel = ref(0);
const router = useRouter();
const blameSubject = ref("");
const activeNames = ref(["1"]);
const saving = ref(false);
const tableKey = ref(0);
const blameIndex = ref(-1);
const isShowBlameView = ref(false);
const isShowBlameCollectView = ref(false);
const inited = ref(false);
const initialReportData = ref();
const initialBlameData = ref();
const pdfContent = ref();
const tableInstance = ref(TableInstance);

const onSubmit = () => {
  console.log("submit!");
};

watch(form, (newValue, oldValue) => {
  // if (inited.value && initialReportData.value) {
  //   // console.log("initialReportData = ", initialReportData.value);
  //   // console.log("currentReportData = ", newValue);
  //   const isFormChanged =
  //     JSON.stringify(newValue) !== JSON.stringify(initialReportData.value);

  //   if (isFormChanged) {
  //     console.log("表单数据已发生变化");
  //   } else {
  //     console.log("表单数据未发生变化");
  //   }
  //   setDirty(isFormChanged);
  // }
  if (inited.value) {
    setDirty(true);
  }
});

watch(blameFormDatas, (newValue, oldValue) => {
  // if (inited.value && initialBlameData.value) {
  //   const isFormChanged =
  //     JSON.stringify(newValue) !== JSON.stringify(initialBlameData.value);
  //   if (isFormChanged) {
  //     console.log("表单数据已发生变化");
  //   } else {
  //     console.log("表单数据未发生变化");
  //   }
  //   setDirty(isFormChanged);
  // }
  if (inited.value) {
    setDirty(true);
  }
});

// 将 JSON 字符串转换为 form 对象
const jsonToForm = (jsonData: { [key: string]: any }) => {
  for (const key in jsonData) {
    if (Object.prototype.hasOwnProperty.call(jsonData, key)) {
      const value = jsonData[key];
      if (Object.prototype.hasOwnProperty.call(form, key)) {
        form[key] = jsonData[key];
      }
    }
  }
  // console.log(form.owning_user_id || form.owning_user_name ? "A" : "B");
  // console.log(form.owning_user_id);
  // console.log(form.owning_user_name);
  // console.log("owningUserId = " + owningUserId.value);
  // if (!(form.owning_user_id || form.owning_user_name) && owningUserId) {
  //   form.owning_user_id = owningUserId.value;
  //   $http
  //     .get("/getUserNameById?userId=" + owningUserId.value)
  //     .then((response: { data: any }) => {
  //       form.owning_user_id = owningUserId;
  //       form.owning_user_name = response.data + " (" + owningUserId.value + ")";
  //     });
  // }
  // form.blameCounts = jsonData["blameCounts"];
  console.log(form);
};

const openToNewWindow = () => {
  let currentURL = window.location.href;
  window.open(currentURL, "_blank");
};

onMounted(() => {
  let uid = router.currentRoute.value.query.uid as string;
  let isReadOnlyStr = router.currentRoute.value.query.isReadOnly as string;
  let saveButton = router.currentRoute.value.query.saveButton as string;
  // owningUserId.value = router.currentRoute.value.query.owningUserId as string;
  userId.value = router.currentRoute.value.query.userId as string;
  hasSaveButton.value = saveButton && saveButton == "false" ? false : true;
  console.log("uid = " + uid + ", userId = " + userId.value);
  setFormReadOnly(isReadOnlyStr == "true");
  // form.uid = uid;
  form_uid.value = uid;
  if (uid) {
    loadData();
  }
  // alert("Component mounted");
  // 在这里可以执行一些初始化操作
  (window as any).submitForm = submitForm;
  (window as any).setFormReadOnly = setFormReadOnly;
  (window as any).saveData = saveData;
});

const setDirty = (isDirty: boolean) => {
  console.log("是否修改 ==> " + isDirty);
  let win = window as any;
  if (win.java && win.java.setDirty) {
    win.java.setDirty(isDirty);
  }
};

const loadData = () => {
  $http
    .get("/getFullDelrData?uid=" + form_uid.value + "&userId=" + userId.value)
    .then((response: { data: any }) => {
      console.log("评审单查询结果", response.data);
      let reportData = response.data.report;
      let blameData = response.data.blames;

      jsonToForm(reportData);
      blameFormDatas.value = blameData;

      initialReportData.value = { ...reportData };
      initialBlameData.value = { ...blameData };

      nextTick(() => {
        setDirty(false);
        inited.value = true;
        isOwner.value = form.owning_user_id === userId.value;
      });
    })
    .catch((error: any) => {
      console.log(error);
      inited.value = true;
    });

  if (userId.value) {
    $http
      .get("/getUserNameById?userId=" + userId.value)
      .then((response: { data: any }) => {
        userName.value = response.data + " (" + userId.value + ")";
      });
  }
};

const saveBlameData = () => {
  //console.log(blameViewRef);
  if (blameViewRef.value) {
    // 获取 BlameView 组件中的 data
    const isValid = blameViewRef.value.checkFormValid();
    if (!isValid) {
      return;
    }
    const data = blameViewRef.value.getFormData();
    //
    for (const key in data) {
      blameFormDatas.value[blameIndex.value][key] = data[key];
    }
    isShowBlameView.value = false;
    setDirty(true);
    nextTick(() => {
      saveData();
    });

    // ElMessage({
    //   type: "success",
    //   message: "保存成功",
    // });
  }
};

const submitForm = () => {
  console.log("Form submitted from JxBrowser!");
  // 模拟表单提交操作
  //alert("Form submitted from JxBrowser!");
  form.object_name = "XXXXXXXXXXXXX";
  onSubmit();
};

const setFormReadOnly = (isReadOnly: boolean) => {
  formReadOnly.value = isReadOnly;
};

//给BlameView调用的
const setBlameFormData = (subject: string, formData: any) => {
  //console.log("接收到子页数据：", formData);
  //blameForms[subject] = formData;
};

const openBlameView = (index: number) => {
  console.log(blameFormDatas);
  console.log("显示第 " + index + " 个数据");
  //console.log(blameFormDatas.value[index]);
  isShowBlameView.value = true;
  blameIndex.value = index;
  // displayBlameFormData.value = blameFormDatas.value[index];
  nextTick(() => {
    displayBlameFormData.value = {};
    for (const key in blameFormDatas.value[index]) {
      displayBlameFormData.value[key] = blameFormDatas.value[index][key];
    }
    // let introducer_id = displayBlameFormData.value.introducer_id;
    // //只有提出人和当前文档访问者相同时，才有编辑权限
    // let ediatble = introducer_id == userId.value;
    blameViewRef.value.setFormData(displayBlameFormData.value, userId.value);
  });
};

const openBlameCollectView = () => {
  isShowBlameCollectView.value = true;
};

const sendBlameNotes = () => {
  blameCollectViewRef.value.sendEmail2Selection();
};

const saveData = async () => {
  saving.value = true;
  let errorMsg = null;
  try {
    form.uid = form_uid.value;
    const saveDesignEvalImplUrl = "/saveDelrData";
    const saveBlamesUrl = "/saveBlames";
    console.log("保存主表单数据：", form);
    const response1 = await $http.post(saveDesignEvalImplUrl, form);
    console.log("提交结果", response1.data);
    console.log("指摘内容：", blameFormDatas.value);
    const data = {
      puid: form_uid.value,
      userId: userId.value,
      blames: Array.from(blameFormDatas.value),
    };
    console.log("保存指摘表单数据：", data);
    const response2 = await $http.post(saveBlamesUrl, data);
    console.log("提交结果", response2.data);
    ElMessage({
      type: "success",
      message: "保存成功",
    });
    setDirty(false);
  } catch (error) {
    console.log(error);
    errorMsg = error;
    ElMessage({
      type: "error",
      message: error,
    });
  }
  saving.value = false;
  return errorMsg;
};

const removeBlame = (index: number) => {
  ElMessageBox.confirm(
    "是否删除指摘 [" + blameFormDatas.value[index].subject + "] ？",
    "提示",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      // 用户点击了确认按钮
      blameFormDatas.value.splice(index, 1);
    })
    .catch(() => {
      // 用户点击了取消按钮
      console.log("取消操作");
    });
};
const addBlame = () => {
  ElMessageBox.prompt("请输入指摘主题", "输入", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    inputValidator: (inputValue: any) => {
      if (!inputValue) {
        return "主题不得为空";
      }

      const foundSubjectItem = blameFormDatas.value.find(
        (item: { subject: any }) => item.subject == inputValue
      );
      if (foundSubjectItem) {
        return "该主题已存在，请输入不同的主题";
      }
      return true;
    },
  })
    .then(({ value }) => {
      blameFormDatas.value.push({
        introducer_id: userId.value,
        introducer_name: userName.value,
        subject: value,
        design_eval_impl_uid: form.uid,
      });
      openBlameView(blameFormDatas.value.length - 1);
      ElMessage({
        type: "success",
        message: `创建成功`,
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Input canceled",
      });
    });
};

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any;
  rowIndex: number;
}) => {
  if (row.is_residual) {
    return "warning-row";
  } else if (rowIndex === 3) {
    return "";
  }
  return "";
};

const exportPDF = async () => {
  console.log(pdfContent);
  // const canvas = await html2canvas(pdfContent.value);
  // const imgData = canvas.toDataURL("image/png");
  // const doc = new jsPDF({
  //   orientation: "portrait",
  //   unit: "px",
  //   format: "a4",
  // });
  // const imgProps = doc.getImageProperties(imgData);
  // const pdfWidth = doc.internal.pageSize.getWidth();
  // const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
  // doc.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);
  // doc.save("export.pdf");
  htmlToPDF("main", "设计评价实施报告书");
};

const userSelecterRemoteMethod = async (query: string) => {
  if (query !== "") {
    //userSelecterLoading.value = true;
    try {
      await initUserList();
      selecterOptions.value = itemList.value.filter((item) => {
        return item.validValue.toLowerCase().includes(query.toLowerCase());
      });
    } catch (error) {
      console.error(error);
      ElMessage({
        type: "error",
        message: error,
      });
    }
  } else {
    selecterOptions.value = [];
  }
};

interface ListItem {
  value: string;
  label: string;
  validValue: string;
  userInfo: UserInfo;
}

interface UserInfo {
  userId: string;
  userName: string;
  displayName: string;
  pinyin: string;
}

const userSelecterLoading = ref(false);
const itemList = ref<ListItem[]>([]);
const users = ref<UserInfo[]>([]);
const selecterOptions = ref<ListItem[]>([]);

const initUserList = async () => {
  try {
    if (itemList.value == null || itemList.value.length == 0) {
      userSelecterLoading.value = true;
      const response = await $http.get("/getAllUsers");
      users.value = response.data;
      //userSelecterLoading.value = false;
      itemList.value = users.value.map((item): ListItem => {
        return {
          value: `${item.displayName}`,
          label: `${item.displayName}`,
          validValue: `${item.displayName}` + item.pinyin,
          userInfo: item,
        };
      });
    }
  } catch (error) {
    console.error(error);
    ElMessage({
      type: "error",
      message: error,
    });
  }
  userSelecterLoading.value = false;
};

const handleRowDblclick = (row: any, column: any, event: any) => {
  // 设置双击行的编辑状态为true
  // this.$set(row, "editing", true);
  // tableInstance
  console.log(row);
  row.editing = true;
};
const handleEditFinish = (_index: any, row: any) => {
  // 当输入框失去焦点或按下Enter键时，完成编辑
  // this.$set(row, "editing", false);
  // // 可以在这里添加保存数据的逻辑
  //console.log(`编辑完成: ${row.replier_name}`);
  //根据用户名匹配用户ID
  let replier_name = row.replier_name;
  const us = users.value.filter((item) => {
    return replier_name && replier_name.localeCompare(item.displayName) == 0;
  });
  console.log("filter user = ", us);
  if (us && us.length > 0) {
    row.replier_id = us[0].userId;
  } else {
    row.replier_id = "";
  }
  row.editing = false;
};
</script>
<template>
  <div
    v-loading="saving"
    element-loading-text="Saving..."
    :element-loading-spinner="svg"
    ref="pdfContent"
    id="main"
  >
    <div class="fixed-button">
      <div style="display: flex; align-items: center">
        <el-text tag="b">{{ form.item_id }} - {{ form.object_name }}</el-text>
      </div>
      <div style="margin-right: 30px">
        <el-button
          type="primary"
          v-if="hasSaveButton"
          @click="saveData"
          :loading="saving"
          :disabled="saving || formReadOnly"
          >保存</el-button
        >
        <el-button
          type="primary"
          @click="openBlameCollectView"
          v-if="userId === form.owning_user_id"
          >指摘搜集</el-button
        >
        <el-button type="primary" @click="exportPDF">导出</el-button>
        <!-- <el-button type="primary" @click="openBlameCollectView"
          >发起特批流程（TODO）</el-button
        > -->
      </div>
    </div>
    <el-form
      :model="form"
      :disabled="formReadOnly"
      :style="{ marginTop: '70px' }"
      label-width="auto"
      label-position="left"
      style="max-width: 600px"
      class="form-content"
    >
      <el-form-item label="作成者">
        <el-input
          v-model="form.owning_user_name"
          prefix-icon="User"
          readonly
          class="read-only-input"
        />
      </el-form-item>
      <el-form-item label="项目名">
        <el-input
          v-model="form.project_name"
          readonly
          class="read-only-input"
        />
      </el-form-item>
      <el-form-item label="项目号">
        <el-input v-model="form.project_id" readonly class="read-only-input" />
      </el-form-item>
      <el-form-item label="型号">
        <el-input
          v-model="form.model_code"
          :readonly="!isOwner"
          :class="{ 'read-only-input': !isOwner }"
        />
      </el-form-item>
      <el-form-item label="工厂">
        <el-radio-group v-model="form.factory" :disabled="!isOwner">
          <el-radio label="GD" value="GD" name="factory"></el-radio>
          <el-radio label="海外" value="海外" name="factory"></el-radio>
          <el-radio label="其它" value="其它" name="factory"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="市场">
        <el-radio-group v-model="form.send_dest" :disabled="!isOwner">
          <el-radio label="中国" value="中国" name="send_dest"></el-radio>
          <el-radio label="海外" value="海外" name="send_dest"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="产品等级">
        <el-radio-group v-model="form.product_level" :disabled="!isOwner">
          <el-radio label="A" value="A" name="product_level"></el-radio>
          <el-radio label="B" value="B" name="product_level"></el-radio>
          <el-radio label="C" value="C" name="product_level"></el-radio>
          <el-radio label="D" value="D" name="product_level"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="DR的种类">
        <el-radio-group v-model="form.dr_type" :disabled="!isOwner">
          <el-radio
            label="DR0 (包括但不限于：D-FMEA、控制软件检讨、控制硬件检讨等)"
            value="DR0"
            name="dr_type"
          ></el-radio>
          <el-radio
            label="DR1 (包括但不限于：D-FMEA、P-FMEA、风险评价、设计品质确认、图面检讨、三方确认会等)"
            value="DR1"
            name="dr_type"
          ></el-radio>
          <el-radio
            label="DR2 (包括但不限于：D-FMEA、P-FMEA、风险评价、设计品质确认、图面检讨、三方确认会等)"
            value="DR2"
            name="producdr_typetLevel"
          ></el-radio>
          <el-radio label="其他" value="other" name="dr_type"></el-radio>
        </el-radio-group>
        <el-input
          v-model="form.dr_type_other"
          :readonly="!isOwner"
          :disabled="form.dr_type != '其他'"
        />
      </el-form-item>
      <el-form-item label="实施日期">
        <el-date-picker
          v-model="form.impl_date"
          type="date"
          placeholder="请选择日期"
          style="width: 100%"
          :readonly="!isOwner"
          :class="{ 'read-only-input': !isOwner }"
        />
      </el-form-item>
      <el-form-item label="DR有效性">
        <el-col :span="3" class="text-center">
          <span class="text-gray-500"> 出席率</span>
        </el-col>
        <el-col :span="6">
          <el-input
            v-model="form.attendance"
            :readonly="!isOwner"
            :class="{ 'read-only-input': !isOwner }"
          >
            <template v-slot:append>%</template>
          </el-input>
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500"></span>
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500"> 会议</span>
        </el-col>
        <el-col :span="7">
          <el-radio-group v-model="form.is_meeting_valid">
            <el-switch
              v-model="form.is_meeting_valid"
              inline-prompt
              class="ml-2"
              style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              "
              active-text="有效"
              inactive-text="无效"
              :disabled="!isOwner"
            />
          </el-radio-group>
        </el-col>
      </el-form-item>
      <el-form-item label="指摘数">
        <el-row>
          <el-col :span="7" class="text-left">
            <span> ×件数: </span>
          </el-col>
          <el-col :span="15">
            <el-input
              v-model="form.blameCounts['×']"
              readonly
              class="read-only-input"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7" class="text-left">
            <span> △件数: </span>
          </el-col>
          <el-col :span="15">
            <el-input
              v-model="form.blameCounts['△']"
              readonly
              class="read-only-input"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7" class="text-left">
            <span> □件数: </span>
          </el-col>
          <el-col :span="15">
            <el-input
              v-model="form.blameCounts['□']"
              readonly
              class="read-only-input"
            >
            </el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7" class="text-left">
            <span> 确认件数: </span>
          </el-col>
          <el-col :span="15">
            <el-input
              v-model="form.blameCounts['确认']"
              readonly
              class="read-only-input"
            >
            </el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <!-- <el-form-item label="指摘数">
        <el-row>
          <el-col :span="7" class="text-left">
            <span> ×件数: </span>
          </el-col>
          <el-col :span="15">
            <el-input v-model="form.blameCounts['×']" readonly>
              <template v-slot:append>系统自动计算</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7" class="text-left">
            <span> △件数: </span>
          </el-col>
          <el-col :span="15">
            <el-input v-model="form.blameCounts['△']" readonly>
              <template v-slot:append>系统自动计算</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7" class="text-left">
            <span> □件数: </span>
          </el-col>
          <el-col :span="15">
            <el-input v-model="form.blameCounts['□']" readonly>
              <template v-slot:append>系统自动计算</template>
            </el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7" class="text-left">
            <span> 确认件数: </span>
          </el-col>
          <el-col :span="15">
            <el-input v-model="form.blameCounts['确认']" readonly>
              <template v-slot:append>系统自动计算</template>
            </el-input>
          </el-col>
        </el-row>
      </el-form-item> -->
    </el-form>
    <div style="margin-bottom: 20px">
      <el-button size="primary" :disabled="formReadOnly" @click="addBlame()">
        新建指摘
      </el-button>
      <!-- <el-input
        v-model="blameSubject"
        style="max-width: 600px"
        placeholder="请输入主题以新增指摘"
      >
        <template #append>
          <el-button icon="Plus" @click="addTab(editableTabsValue)" />
        </template>
      </el-input> -->
    </div>
    <el-table
      ref="tableInstance"
      :data="blameFormDatas"
      :key="tableKey"
      style="width: auto"
      highlight-current-row
      border
      table-layout="auto"
      :row-class-name="tableRowClassName"
      @row-dblclick="handleRowDblclick"
    >
      <el-table-column
        type="index"
        label="序号"
        width="60"
        show-overflow-tooltip
      />
      <el-table-column
        prop="subject"
        label="主题"
        width="200"
        show-overflow-tooltip
      >
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <!-- <el-icon v-if="scope.row.is_residual"><timer /></el-icon> -->
            <el-tag
              v-if="scope.row.is_residual"
              type="danger"
              disable-transitions
              >残留指摘</el-tag
            >
            <span style="margin-left: 10px">{{ scope.row.subject }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="introducer_name"
        label="提出者"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="replier_name"
        label="回复者"
        width="150"
        show-overflow-tooltip
        editable
      >
        <template v-slot="scope">
          <!-- <el-input
            v-if="scope.row.editing"
            v-model="scope.row.replier_name"
            @blur="handleEditFinish(scope.$index, scope.row)"
            @keyup.enter="handleEditFinish(scope.$index, scope.row)"
          ></el-input> -->
          <el-select-v2
            v-if="scope.row.editing"
            v-model="scope.row.replier_name"
            style="width: 240px"
            filterable
            remote
            :remote-method="userSelecterRemoteMethod"
            clearable
            :options="selecterOptions"
            :loading="userSelecterLoading"
            placeholder="请输入或选择用户"
            @blur="handleEditFinish(scope.$index, scope.row)"
            @keyup.enter="handleEditFinish(scope.$index, scope.row)"
          >
          </el-select-v2>
          <span v-else>{{ scope.row.replier_name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="judge"
        label="指摘判断"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="progress"
        label="对策状况"
        width="130"
        show-overflow-tooltip
      />
      <el-table-column
        prop="confirmation"
        label="对策确认"
        width="130"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-tag
            v-if="scope.row.confirmation"
            :type="scope.row.confirmation === 'OK' ? 'success' : 'danger'"
            disable-transitions
            >{{ scope.row.confirmation }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="{ $index }">
          <el-button
            link
            type="primary"
            size="small"
            @click="openBlameView($index)"
          >
            详情
          </el-button>
          <el-button
            link
            size="small"
            type="danger"
            v-if="!formReadOnly"
            @click="removeBlame($index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-tabs
      v-model="editableTabsValue"
      type="card"
      class="demo-tabs"
      :closable="!formReadOnly"
      @tab-remove="removeTab"
    >
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <BlameView
          :userId="userId"
          :subject="item.name"
          :formReadOnly="formReadOnly"
          :formData="item.data"
          @setBlameFormData="setBlameFormData"
        ></BlameView>
      </el-tab-pane>
    </el-tabs> -->
  </div>
  <el-drawer
    v-model="isShowBlameView"
    title="指摘详情"
    direction="rtl"
    class="demo-drawer"
    :show-close="false"
    size="650px"
  >
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">指摘详情</h4>
      <el-button type="primary" @click="saveBlameData" :disabled="formReadOnly"
        >确认</el-button
      >
      <el-button type="danger" @click="close">关闭</el-button>
    </template>
    <BlameView
      ref="blameViewRef"
      :userId="userId"
      :formReadOnly="formReadOnly"
      :formData="displayBlameFormData"
      lock-scroll
      @setBlameFormData="setBlameFormData"
    ></BlameView>
  </el-drawer>
  <el-drawer
    v-model="isShowBlameCollectView"
    title="指摘搜集"
    direction="ltr"
    size="650px"
    lock-scroll
  >
    <template #header="{ titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">指摘搜集</h4>
      <el-button type="primary" @click="sendBlameNotes">发送邮件通知</el-button>
    </template>
    <BlameCollectView
      ref="blameCollectViewRef"
      :uid="form_uid"
    ></BlameCollectView>
  </el-drawer>
</template>

<style>
.text-left {
  text-align: left;
  width: 15px;
}
.fixed-button {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 999;
  display: flex;
  justify-content: space-between;
}
.form-content {
  /* 确保表单内容不被保存按钮遮挡 */
  /* margin-top: 70px; */
  margin-top: 10px;
}
.read-only-input .el-input__inner {
  background-color: #f5f5f5;
}
.read-only-input .el-input__wrapper {
  background-color: #f5f5f5;
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
